 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自定义复选框</title>
</head>
<style>	
	body {
		margin: 0;
		padding: 0;
	}	
	.container {
		padding: 50px;
	}
	.checkbox, .button {
		position: absolute;
		clip: rect(0,0,0,0);
	}
 	.checkbox + label::before {
 		content: '\a0';
 		display: inline-block;
 		vertical-align: .2em;
 		width: .8em;
 		height: .8em;
 		margin-right: .2em;
 		border-radius: .2em;
 		background: silver;
 		text-indent: .15em;
 		line-height: .65;
 	}
 	.checkbox:checked + label::before {
 		content: '\2713';
 		background: yellowgreen;
 	}
 	.checkbox:focus + label::before {
 		box-shadow: 0 0 .1em .1em #58a;
 	}
 	.checkbox:disabled + label::before {
 		background: gray;
 		box-shadow: none;
 		color: #555;
 	}
 	/*开关式按钮*/
 	.button + label {
 		display: inline-block;
 		padding: .3em .5em;
 		background: #ccc;
 		background-image: linear-gradient(#ddd #bbb);
 		border: 1px solid rgba(0,0,0,.2);
 		border-radius: .3em;
 		box-shadow: 0 1px white inset;
 		text-align: center;
 		text-shadow: 0 1px 1px white;
 	}
	.button:checked + label,
	.button:active + label {
		box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;
		border-color: rgba(0,0,0,.3);
		background: #bbb;
	}
</style>
<body>
	<div class="container">
		<input type="checkbox" id="awesome" class="checkbox" />
		<label for="awesome">Awesome!</label>
	</div>
	<div class="container">
		<input type="checkbox" id="awesome1" class="button" />
		<label for="awesome1">Awesome!</label>	
	</div>
</body>
</html>